<template>
  <div class="w-full">
    <!-- 个人介绍 -->
    <section class="mb-12">
      <div class="flex flex-col lg:flex-row items-center gap-8">
        <div class="flex-shrink-0">
          <div
            class="w-32 h-32 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full flex items-center justify-center text-4xl">
            👨‍💻
          </div>
        </div>
        <div>
          <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-2">关于我</h1>
          <p class="text-xl text-indigo-500 mb-4">前端开发工程师</p>
          <p class="text-gray-600 leading-relaxed text-lg">
            我是一名热爱技术的前端开发者，专注于现代 Web 技术的应用和创新。
            通过这个博客，我希望能够分享我的学习经验和技术见解，与大家一起成长。
          </p>
        </div>
      </div>
    </section>

    <!-- 技能展示 -->
    <section class="mb-12">
      <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">技能专长</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
        <!-- 前端技术 -->
        <div>
          <h3 class="text-xl font-semibold text-indigo-500 mb-6">前端技术</h3>
          <div class="space-y-4">
            <div class="flex items-center gap-4">
              <span class="text-gray-700 font-medium min-w-[100px]">Vue.js</span>
              <div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
                <div
                  class="h-full bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full transition-all duration-300"
                  style="width: 90%"></div>
              </div>
            </div>
            <div class="flex items-center gap-4">
              <span class="text-gray-700 font-medium min-w-[100px]">React</span>
              <div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
                <div
                  class="h-full bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full transition-all duration-300"
                  style="width: 85%"></div>
              </div>
            </div>
            <div class="flex items-center gap-4">
              <span class="text-gray-700 font-medium min-w-[100px]">JavaScript</span>
              <div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
                <div
                  class="h-full bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full transition-all duration-300"
                  style="width: 95%"></div>
              </div>
            </div>
            <div class="flex items-center gap-4">
              <span class="text-gray-700 font-medium min-w-[100px]">TypeScript</span>
              <div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
                <div
                  class="h-full bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full transition-all duration-300"
                  style="width: 80%"></div>
              </div>
            </div>
            <div class="flex items-center gap-4">
              <span class="text-gray-700 font-medium min-w-[100px]">CSS3/Sass</span>
              <div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
                <div
                  class="h-full bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full transition-all duration-300"
                  style="width: 88%"></div>
              </div>
            </div>
          </div>
        </div>

        <!-- 后端技术 -->
        <div>
          <h3 class="text-xl font-semibold text-indigo-500 mb-6">后端技术</h3>
          <div class="space-y-4">
            <div class="flex items-center gap-4">
              <span class="text-gray-700 font-medium min-w-[100px]">Node.js</span>
              <div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
                <div
                  class="h-full bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full transition-all duration-300"
                  style="width: 75%"></div>
              </div>
            </div>
            <div class="flex items-center gap-4">
              <span class="text-gray-700 font-medium min-w-[100px]">Express</span>
              <div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
                <div
                  class="h-full bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full transition-all duration-300"
                  style="width: 70%"></div>
              </div>
            </div>
            <div class="flex items-center gap-4">
              <span class="text-gray-700 font-medium min-w-[100px]">MongoDB</span>
              <div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
                <div
                  class="h-full bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full transition-all duration-300"
                  style="width: 65%"></div>
              </div>
            </div>
            <div class="flex items-center gap-4">
              <span class="text-gray-700 font-medium min-w-[100px]">MySQL</span>
              <div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
                <div
                  class="h-full bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full transition-all duration-300"
                  style="width: 60%"></div>
              </div>
            </div>
          </div>
        </div>

        <!-- 开发工具 -->
        <div>
          <h3 class="text-xl font-semibold text-indigo-500 mb-6">开发工具</h3>
          <div class="space-y-4">
            <div class="flex items-center gap-4">
              <span class="text-gray-700 font-medium min-w-[100px]">Git</span>
              <div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
                <div
                  class="h-full bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full transition-all duration-300"
                  style="width: 85%"></div>
              </div>
            </div>
            <div class="flex items-center gap-4">
              <span class="text-gray-700 font-medium min-w-[100px]">Webpack</span>
              <div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
                <div
                  class="h-full bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full transition-all duration-300"
                  style="width: 75%"></div>
              </div>
            </div>
            <div class="flex items-center gap-4">
              <span class="text-gray-700 font-medium min-w-[100px]">Vite</span>
              <div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
                <div
                  class="h-full bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full transition-all duration-300"
                  style="width: 80%"></div>
              </div>
            </div>
            <div class="flex items-center gap-4">
              <span class="text-gray-700 font-medium min-w-[100px]">Docker</span>
              <div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
                <div
                  class="h-full bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full transition-all duration-300"
                  style="width: 60%"></div>
              </div>
            </div>
          </div>
        </div>

        <!-- 其他 -->
        <div>
          <h3 class="text-xl font-semibold text-indigo-500 mb-6">其他</h3>
          <div class="space-y-4">
            <div class="flex items-center gap-4">
              <span class="text-gray-700 font-medium min-w-[100px]">VSCode</span>
              <div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
                <div
                  class="h-full bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full transition-all duration-300"
                  style="width: 100%"></div>
              </div>
            </div>
          </div>
          <div class="space-y-4">
            <div class="flex items-center gap-4">
              <span class="text-gray-700 font-medium min-w-[100px]">Cursor</span>
              <div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
                <div
                  class="h-full bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full transition-all duration-300"
                  style="width: 100%"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 工作经历 -->
    <section class="mb-12">
      <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">工作经历</h2>
      <div class="relative pl-8">
        <!-- 时间线 -->
        <div class="absolute left-0 top-0 bottom-0 w-0.5 bg-indigo-500"></div>

        <!-- 工作经历项目 -->
        <div class="relative mb-8">
          <div class="absolute left-[-2rem] top-2 w-3 h-3 bg-indigo-500 rounded-full border-4 border-white shadow-lg">
          </div>
          <div class="ml-4">
            <h3 class="text-xl font-semibold text-gray-800 mb-2">前端开发工程师</h3>
            <p class="text-indigo-500 font-medium mb-1">迅天软件有限公司</p>
            <p class="text-gray-500 text-sm mb-3">2022年6月 - 2025年5月</p>
            <p class="text-gray-600 leading-relaxed">
              1. 负责公司所有vue和uniapp相关项目的前端开发工作, 新增或修改页面, 优化用户体验, 提升产品性能。
            </p>
            <p class="text-gray-600 leading-relaxed">
              2. 负责前端系统性能优化问题, 例如: 前端动画卡顿, 页面加载慢, 页面卡顿等。
            </p>
            <p class="text-gray-600 leading-relaxed">
              3. 参与公司软件设计会议, 与设计师和后端工程师讨论需求和设计方案。
            </p>
            <p class="text-gray-600 leading-relaxed">
              4. 参与公司内部技术分享, 提升团队技术水平。
            </p>
          </div>
        </div>

        <div class="relative mb-8">
          <div class="absolute left-[-2rem] top-2 w-3 h-3 bg-indigo-500 rounded-full border-4 border-white shadow-lg">
          </div>
          <div class="ml-4">
            <h3 class="text-xl font-semibold text-gray-800 mb-2">前端开发工程师</h3>
            <p class="text-indigo-500 font-medium mb-1">国宇软件技术服务有限公司</p>
            <p class="text-gray-500 text-sm mb-3">2021年6月 - 2022年5月</p>
            <p class="text-gray-600 leading-relaxed">
              1. 负责公司核心产品的前端开发工作, 新增或修改页面, 优化用户体验, 提升产品性能。
            </p>
            <p class="text-gray-600 leading-relaxed">
              2. 主要负责移动端开发
            </p>
          </div>
        </div>

        <div class="relative">
          <div class="absolute left-[-2rem] top-2 w-3 h-3 bg-indigo-500 rounded-full border-4 border-white shadow-lg">
          </div>
          <div class="ml-4">
            <h3 class="text-xl font-semibold text-gray-800 mb-2">实习前端开发</h3>
            <p class="text-indigo-500 font-medium mb-1">国宇软件技术服务有限公司</p>
            <p class="text-gray-500 text-sm mb-3">2021年6月 - 2021年9月</p>
            <p class="text-gray-600 leading-relaxed">
              维护现有前端项目, 新增或修改页面, 优化用户体验, 提升产品性能。
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- 教育背景 -->
    <section class="mb-12">
      <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">教育背景</h2>
      <div class="bg-white rounded-xl p-6 shadow-sm">
        <h3 class="text-xl font-semibold text-gray-800 mb-2">计算机科学与技术</h3>
        <p class="text-indigo-500 font-medium mb-1">私立华联大学</p>
        <p class="text-gray-600 mb-1">专科</p>
        <p class="text-gray-500 text-sm">2018年 - 2021年</p>
      </div>
    </section>

    <!-- 兴趣爱好 -->
    <section>
      <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">兴趣爱好</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div
          class="bg-white rounded-xl p-6 shadow-sm text-center hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
          <div class="text-4xl mb-4">📚</div>
          <h3 class="text-lg font-semibold text-gray-800 mb-2">阅读</h3>
          <p class="text-gray-600 text-sm">喜欢阅读技术书籍和科幻小说</p>
        </div>
        <div
          class="bg-white rounded-xl p-6 shadow-sm text-center hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
          <div class="text-4xl mb-4">🎮</div>
          <h3 class="text-lg font-semibold text-gray-800 mb-2">游戏</h3>
          <p class="text-gray-600 text-sm">偶尔玩一些独立游戏放松心情</p>
        </div>
        <div
          class="bg-white rounded-xl p-6 shadow-sm text-center hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
          <div class="text-4xl mb-4">🏃‍♂️</div>
          <h3 class="text-lg font-semibold text-gray-800 mb-2">运动</h3>
          <p class="text-gray-600 text-sm">喜欢跑步和健身，保持健康的生活方式</p>
        </div>
        <div
          class="bg-white rounded-xl p-6 shadow-sm text-center hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
          <div class="text-4xl mb-4">🎵</div>
          <h3 class="text-lg font-semibold text-gray-800 mb-2">音乐</h3>
          <p class="text-gray-600 text-sm">听各种类型的音乐，特别是电子音乐</p>
        </div>
      </div>
    </section>
  </div>
</template>